<template>
  <div>
   {{msg}}
    <br>
    <button @click="add">+</button>
    <input type="text" size="3" v-model="num">
    <button @click="sub" >-</button>
  </div>
</template>

<script>

export default {
  name: "AppOne",
  data() {
    return {
      num: 0,
      msg: 'hello vue',
      max: 10,
      min:1,
    }
  },
  methods:{
    add(){
      if(this.num >= this.max){
        this.num = this.max;
      }else{
        this.num++
      }
    },
    sub(){
      if(this.num<=this.min){
        this.num=this.min;
      }else{
        this.num--;
      }
    }
  }

}
</script>

<style scoped>

</style>